<template>
  <div id="app">
    <a href="https://www.npmjs.com/package/smooth-line" target="_blank">
      <img
        class="fixed top-[10px] right-[10px]"
        src="https://img.shields.io/npm/v/smooth-line?color=a1b858&label=canvas写字板"
        alt=""
      />
    </a>
    <div class="flex select-none h-[60px] fixed w-screen bottom-0 left-0 z-10 px-2 justify-center items-center">
      <div
        @click="updateColor"
        class="w-[40px] h-[40px] cursor-pointer transition-colors rounded-full mr-[10px]"
        :style="{ background: color }"
      />
      <div
        @click="bold = !bold"
        :class="{ 'font-bold text-lg': bold }"
        class="w-[40px] h-[40px] bg-[#333B71] mr-[10px] transition-all cursor-pointer text-sm text-white flex items-center justify-center rounded-full"
      >
        B
      </div>
      <div
        @click="() => $refs.example.export()"
        class="text-sm w-[60px] h-[40px] mr-[10px] bg-[#333B71] transition-all cursor-pointer text-white flex items-center justify-center rounded-full"
      >
        导出
      </div>
    </div>
    <canvas-example :color="color" ref="example" :max-width="bold ? 15 : 6" :min-width="bold ? 4 : 2" />
  </div>
</template>

<script>
import CanvasExample from '@/canvas-example'
export default {
  name: 'App',
  components: { CanvasExample },
  data: () => ({ color: '#000', bold: true }),
  methods: {
    updateColor() {
      this.color = `#${Math.floor(Math.random() * 16777215).toString(16)}`
    }
  }
}
</script>
